<template>
	<view class="userinfo-box">
		<view class="userinfo-item">
			<view>头像</view>
			<view class="userinfo-item-r" @tap="changImg">
				<image :src="imgpic" mode="aspectFill"></image>
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</view>
		<view class="userinfo-item">
			<view>昵称</view>
			<view class="userinfo-item-r">
				<view>
					<input type="text" v-model="nickName" />
				</view>
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</view>
		<view class="userinfo-item">
			<view>性别</view>
			<view class="userinfo-item-r" @tap="chooseSex">
				<view>{{sex}}</view>
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</view>
		<view class="userinfo-item">
			<view>生日</view>
			<view class="userinfo-item-r">
				<picker mode="date" :value="dateTime" :start="startDate" :end="endDate"
				 @change="bindDateChange">
					<view>{{dateTime}}</view>
				</picker>
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</view>
		<view class="userinfo-item">
			<view>情感</view>
			<view class="userinfo-item-r" @tap="chooseEmotion">
				<view>{{emotionStatus}}</view>
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</view>
		<view class="userinfo-item">
			<view>职业</view>
			<view class="userinfo-item-r">
				<view>厨师</view>
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</view>
		<view class="userinfo-item">
			<view>家乡</view>
			<view class="userinfo-item-r" @tap="chooseAddress">
				<view>
					{{address}}
				</view>
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</view>
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
	</view>
</template>

<script>
	let sexArr=['男','女','保密'];
	let emotion=['单身','已婚','保密'];
	import simpleAddress from '@/components/common/simple-address/simple-address.vue';
	export default {
		data(){
			return{
				imgpic:'../../static/img/demo6.jpg',
				nickName:'生日块',
				sex:'男',
				dateTime:'2019-03-15',
				emotionStatus:'单身',
				address:'山西省-太原市-万柏林区',
				cityPickerValueDefault: [0, 0, 1],
			}
		},
		components:{
			simpleAddress
		},
		 computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		methods:{
			changImg(){
				uni.chooseImage({
					count:1,
					sizeType:['compressed'],
					success: (res)=> {
						console.log(res)
						this.imgpic=res.tempFiles[0].path;
						console.log(this.imgpic)
					}
				})
			},
			chooseSex(){
				uni.showActionSheet({
				    itemList: sexArr,
				    success: (res)=> {
						this.sex=sexArr[res.tapIndex]
				        console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				    },
				   
				});
			},
			chooseEmotion(){
				uni.showActionSheet({
				    itemList: emotion,
				    success: (res)=> {
						this.emotionStatus=emotion[res.tapIndex]
				    },
				   
				});
			},	
			chooseAddress(){
				// 根据 label 获取
				var index = this.$refs.simpleAddress.queryIndex(['山西省', '太原市', '万柏林区'], 'label');
				console.log(index);
				this.cityPickerValueDefault = index.index;
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				this.address = e.label;
			},
			bindDateChange: function(e) {
			            this.dateTime = e.target.value
			        },
			getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        }
		}
	}
</script>

<style lang="scss">
	.userinfo-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx;
		border-bottom: 1px solid #F9F9F9;
		&>view:first-child{
			padding: 0 20upx;
			text-align: left;
		}
		.userinfo-item-r{
			
			display: flex;
			align-items: center;
			image{
				width: 80upx;
				height: 80upx;
				border-radius: 100px;
			}
			&>view:first-child{
				text-align: right;
			}
			&>view:last-child{
				margin: 0 10upx;
				width: 50upx;
			}
		}
	}
</style>
